<template>
  <div class="flex flex-col min-h-screen bg-gradient-to-br from-gray-900 to-gray-800">
    <!-- 登录提示横幅 -->
    <div v-if="!isLoggedIn" class="relative">
      <div 
        class="fixed top-0 left-0 right-0 bg-gradient-to-r from-primary-600/90 to-secondary-600/90 backdrop-blur-md z-50 transition-all duration-300 shadow-lg"
        :class="{ 'animate-banner-attention': showBannerAnimation }"
      >
        <div class="container mx-auto px-6 py-3">
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-2">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white/90" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
              </svg>
              <p class="text-white/90 font-medium">登录后体验更多精彩功能</p>
            </div>
            <div class="flex items-center space-x-4">
              <!-- 登录按钮部分 -->
              <button 
                @click="goToLogin"
                :class="[
                  'px-4 py-1.5 bg-white/20 hover:bg-white/30 text-white rounded-full text-sm font-medium transition-all duration-300 hover:scale-105 hover:shadow-lg flex items-center space-x-1',
                  { 'animate-shake login-button-highlight': showLoginAnimation }
                ]"
              >
                <span>立即登录</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
      <!-- 添加顶部间距，防止内容被横幅遮挡 -->
      <div class="h-16"></div>
    </div>

    <!-- 登录模态框 -->
    <Transition
      enter-active-class="transition duration-300 ease-out"
      enter-from-class="transform scale-95 opacity-0"
      enter-to-class="transform scale-100 opacity-100"
      leave-active-class="transition duration-200 ease-in"
      leave-from-class="transform scale-100 opacity-100"
      leave-to-class="transform scale-95 opacity-0"
    >
      <div v-if="showLoginModal" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <!-- 背景遮罩 -->
        <div class="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity backdrop-blur-sm"></div>

        <div class="flex items-center justify-center min-h-screen p-4">
          <div class="relative bg-gray-800 rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden border border-gray-700/50">
            <!-- 关闭按钮 -->
            <button 
              @click="closeLoginModal" 
              class="absolute top-3 right-3 text-gray-400 hover:text-white transition-colors"
            >
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>

            <!-- 登录表单 -->
            <div class="p-6">
              <div class="flex justify-center mb-4">
                <div class="w-12 h-12 rounded-full bg-gradient-to-r from-primary-500 to-secondary-500 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4" />
                  </svg>
                </div>
              </div>
              <h2 class="text-xl font-bold text-white mb-4 text-center">欢迎登录</h2>
              
              <!-- 登录方式切换 -->
              <div class="flex space-x-2 mb-5">
                <button 
                  @click="loginType = 'password'"
                  :class="[
                    'flex-1 py-1.5 text-sm font-medium rounded-lg transition-colors',
                    loginType === 'password' 
                      ? 'bg-gradient-to-r from-primary-500 to-primary-600 text-white' 
                      : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                  ]"
                >
                  密码登录
                </button>
                <button 
                  @click="loginType = 'sms'"
                  :class="[
                    'flex-1 py-1.5 text-sm font-medium rounded-lg transition-colors',
                    loginType === 'sms' 
                      ? 'bg-gradient-to-r from-primary-500 to-primary-600 text-white' 
                      : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
                  ]"
                >
                  短信登录
                </button>
              </div>

              <!-- 密码登录表单 -->
  <form v-if="loginType === 'password'" @submit.prevent="handlePasswordLogin" class="space-y-3">
    <div>
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
          </svg>
        </div>
        <input 
          type="text" 
          v-model="passwordForm.username" 
          placeholder="用户名/手机号"
          class="w-full pl-10 pr-4 py-2 bg-gray-700/50 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
          :class="{ 'border-red-500 focus:ring-red-500': formErrors.username }"
        >
      </div>
      <p v-if="formErrors.username" class="mt-1 text-red-400 text-xs">{{ formErrors.username }}</p>
    </div>
    <div>
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
          </svg>
        </div>
        <input 
          type="password" 
          v-model="passwordForm.password" 
          placeholder="密码"
          class="w-full pl-10 pr-4 py-2 bg-gray-700/50 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
          :class="{ 'border-red-500 focus:ring-red-500': formErrors.password }"
        >
      </div>
      <p v-if="formErrors.password" class="mt-1 text-red-400 text-xs">{{ formErrors.password }}</p>
    </div>
    
    <!-- 添加验证码输入框 -->
    <div>
      <div class="flex space-x-2">
        <div class="relative flex-1">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2H4zm0 2h12v12H4V4zm3 5a1 1 0 011-1h2a1 1 0 110 2H8a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2h-1z" clip-rule="evenodd" />
            </svg>
          </div>
          <input 
            type="text" 
            v-model="passwordForm.captcha" 
            placeholder="验证码"
            class="w-full pl-10 pr-4 py-2 bg-gray-700/50 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
            :class="{ 'border-red-500 focus:ring-red-500': formErrors.captcha }"
          >
        </div>
        <!-- 验证码图片 -->
        <div 
          class="h-10 w-24 flex-shrink-0 bg-gray-700 rounded-lg overflow-hidden cursor-pointer border border-gray-600"
          @click="refreshCaptcha"
        >
          <img 
            v-if="captchaUrl" 
            :src="captchaUrl" 
            alt="验证码" 
            class="h-full w-full object-cover"
          />
          <div v-else class="h-full w-full flex items-center justify-center">
            <svg class="animate-spin h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
          </div>
        </div>
      </div>
      <p v-if="formErrors.captcha" class="mt-1 text-red-400 text-xs">{{ formErrors.captcha }}</p>
    </div>
    
    <div class="flex items-center justify-between text-xs">
      <label class="flex items-center text-gray-300">
        <input type="checkbox" class="form-checkbox h-3.5 w-3.5 text-primary-500 rounded">
        <span class="ml-2">记住我</span>
      </label>
      <a href="#" class="text-primary-400 hover:text-primary-300">忘记密码？</a>
    </div>
    <button 
      type="submit"
      class="w-full py-2 bg-gradient-to-r from-primary-500 to-secondary-500 text-white rounded-lg font-medium hover:from-primary-600 hover:to-secondary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-gray-800 relative shadow-lg"
      :disabled="isLoading"
    >
      <span v-if="isLoading" class="absolute inset-0 flex items-center justify-center">
        <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
      </span>
      <span :class="{ 'opacity-0': isLoading }">登录</span>
    </button>
  </form>

              <!-- 短信登录表单 -->
              <form v-else @submit.prevent="handleSmsLogin" class="space-y-3">
                <div>
                  <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                      </svg>
                    </div>
                    <input 
                      type="tel" 
                      v-model="smsForm.phone" 
                      placeholder="请输入手机号"
                      class="w-full pl-10 pr-4 py-2 bg-gray-700/50 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                      :class="{ 'border-red-500 focus:ring-red-500': formErrors.phone }"
                    >
                  </div>
                  <p v-if="formErrors.phone" class="mt-1 text-red-400 text-xs">{{ formErrors.phone }}</p>
                </div>
                <div>
                  <div class="flex space-x-2">
                    <div class="relative flex-1">
                      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                          <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h8V3a1 1 0 112 0v1h1a2 2 0 012 2v10a2 2 0 01-2 2H3a2 2 0 01-2-2V6a2 2 0 012-2h1V3a1 1 0 011-1zm11 14V6H4v10h12z" clip-rule="evenodd" />
                        </svg>
                      </div>
                      <input 
                        type="text" 
                        v-model="smsForm.code" 
                        placeholder="验证码"
                        class="w-full pl-10 pr-4 py-2 bg-gray-700/50 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                        :class="{ 'border-red-500 focus:ring-red-500': formErrors.code }"
                      >
                    </div>
                    <button 
                      type="button"
                      @click="sendSmsCode"
                      :disabled="countdown > 0 || !smsForm.phone || !/^1[3-9]\d{9}$/.test(smsForm.phone)"
                      class="px-3 py-2 bg-gray-700 text-xs rounded-lg text-primary-400 hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap border border-gray-600"
                    >
                      {{ countdown > 0 ? `${countdown}秒` : '获取验证码' }}
                    </button>
                  </div>
                  <p v-if="formErrors.code" class="mt-1 text-red-400 text-xs">{{ formErrors.code }}</p>
                </div>
                <button 
                  type="submit"
                  class="w-full py-2 bg-gradient-to-r from-primary-500 to-secondary-500 text-white rounded-lg font-medium hover:from-primary-600 hover:to-secondary-600 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-gray-800 relative shadow-lg"
                  :disabled="isLoading"
                >
                  <span v-if="isLoading" class="absolute inset-0 flex items-center justify-center">
                    <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                  </span>
                  <span :class="{ 'opacity-0': isLoading }">登录</span>
                </button>
              </form>
              
              <!-- 登录错误提示 -->
              <div v-if="loginError" class="mt-3 text-center">
                <p class="text-red-400 text-xs">{{ loginError }}</p>
              </div>
              
              <!-- 其他登录方式 -->
              <div class="mt-4 text-center">
                <p class="text-gray-400 text-xs mb-2">其他登录方式</p>
                <div class="flex justify-center space-x-4">
                  <button class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-blue-400 hover:bg-gray-600 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
                    </svg>
                  </button>
                  <button class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-green-400 hover:bg-gray-600 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.525a3.997 3.997 0 00.078-2.183l1.562-1.562C15.802 8.249 16 9.1 16 10zm-5.165 3.913l1.58 1.58A5.98 5.98 0 0110 16a5.976 5.976 0 01-2.516-.552l1.562-1.562a4.006 4.006 0 001.789.027zm-4.677-2.796a4.002 4.002 0 01-.041-2.08l-.08.08-1.53-1.533A5.98 5.98 0 004 10c0 .954.223 1.856.619 2.657l1.54-1.54zm1.088-6.45A5.974 5.974 0 0110 4c.954 0 1.856.223 2.657.619l-1.54 1.54a4.002 4.002 0 00-2.346.033L7.246 4.668zM12 10a2 2 0 11-4 0 2 2 0 014 0z" clip-rule="evenodd" />
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Transition>

    <!-- 用户菜单 -->
    <div 
      v-if="isLoggedIn"
      class="absolute right-6 flex items-center gap-4 z-50 transition-all duration-300"
      :class="'top-4'"
    >
      <!-- 设置按钮 -->
      <button 
        @click="openSettings"
        class="w-8 h-8 rounded-full bg-gray-800/50 backdrop-blur-sm flex items-center justify-center text-gray-300 hover:text-white hover:bg-gray-700/50 transition-all"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
        </svg>
      </button>

      <!-- 用户菜单 -->
      <div class="relative" ref="userMenuRef">
        <button 
          @click="toggleUserMenu"
          class="w-8 h-8 rounded-full bg-gray-800/50 backdrop-blur-sm flex items-center justify-center text-gray-300 hover:text-white hover:bg-gray-700/50 transition-all"
        >
          <span class="text-sm font-medium text-white">{{ userInitial }}</span>
        </button>

        <!-- 下拉菜单 -->
        <div 
          v-show="showUserMenu"
          class="absolute right-0 mt-2 w-48 bg-gray-800/90 backdrop-blur-sm rounded-lg shadow-lg py-1 transform origin-top-right transition-all duration-200"
        >
          <div class="px-4 py-3 border-b border-gray-700">
            <div class="text-sm text-white font-medium">{{ userName }}</div>
            <div class="text-xs text-gray-500">{{ userRole }}</div>
          </div>

          <a 
            @click="handleLogout"
            class="block px-4 py-2 text-sm text-red-400 hover:bg-gray-700 cursor-pointer"
          >
            <div class="flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd" />
              </svg>
              退出登录
            </div>
          </a>
        </div>
      </div>
    </div>

    <!-- 保持原有的主要内容 -->
    <main class="flex-grow container mx-auto px-6 py-12">
      <!-- 标题区域 -->
      <div class="text-center mb-16">
        <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
          <span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-400 to-secondary-400">
            辰晓AI智能助手
          </span>
        </h1>
        <p class="text-lg text-gray-300 max-w-2xl mx-auto">
          探索AI的无限可能，让智能科技为您的生活和工作带来革命性的改变
        </p>
      </div>
      
      <!-- 产品盒子区域 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
        <!-- AI对话 -->
        <div class="group h-full" @click="handleProductClick('/chat')">
          <div class="relative bg-gray-800/50 backdrop-blur-sm rounded-xl overflow-hidden shadow-lg border border-gray-700 transition-all duration-500 hover:shadow-2xl hover:border-primary-500 hover:scale-105 h-full flex flex-col cursor-pointer">
            <!-- 背景动画效果 -->
            <div class="absolute inset-0 bg-gradient-to-br from-primary-900/20 to-primary-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
            
            <!-- 图标和内容 -->
            <div class="relative z-10 flex-grow flex flex-col items-center justify-center p-6 text-center">
              <div class="w-16 h-16 rounded-full bg-primary-500/20 flex items-center justify-center mb-4 transform transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                </svg>
              </div>
              <h3 class="text-xl font-bold text-white mb-2 transition-transform duration-500 group-hover:translate-y-2">AI对话</h3>
              <p class="text-gray-300 text-sm transition-all duration-500 group-hover:opacity-0 group-hover:translate-y-8">
                智能对话助手，随时为您解答问题，提供帮助
              </p>
              
              <!-- 悬浮时显示的按钮 -->
              <div class="absolute bottom-6 left-0 right-0 text-center opacity-0 transform translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500">
                <span class="inline-block px-4 py-2 bg-primary-500 text-white rounded-full text-sm font-medium">
                  立即体验
                </span>
              </div>
            </div>
            
            <!-- 悬浮时的粒子效果 -->
            <div class="absolute inset-0 overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-700">
              <div class="particle-1 absolute w-20 h-20 rounded-full bg-primary-400/10 -top-10 -left-10 group-hover:animate-float-slow"></div>
              <div class="particle-2 absolute w-16 h-16 rounded-full bg-primary-400/10 bottom-10 right-10 group-hover:animate-float-medium"></div>
              <div class="particle-3 absolute w-12 h-12 rounded-full bg-primary-400/10 bottom-20 left-20 group-hover:animate-float-fast"></div>
            </div>
          </div>
        </div>
        
        <!-- AI游戏 -->
        <router-link to="/game" class="group h-full" @click.native="handleProductClick">
          <div class="relative bg-gray-800/50 backdrop-blur-sm rounded-xl overflow-hidden shadow-lg border border-gray-700 transition-all duration-500 hover:shadow-2xl hover:border-secondary-500 hover:scale-105 h-full flex flex-col">
            <!-- 背景动画效果 -->
            <div class="absolute inset-0 bg-gradient-to-br from-secondary-900/20 to-secondary-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
            
            <!-- 图标和内容 -->
            <div class="relative z-10 flex-grow flex flex-col items-center justify-center p-6 text-center">
              <div class="w-16 h-16 rounded-full bg-secondary-500/20 flex items-center justify-center mb-4 transform transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-secondary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <h3 class="text-xl font-bold text-white mb-2 transition-transform duration-500 group-hover:translate-y-2">AI游戏</h3>
              <p class="text-gray-300 text-sm transition-all duration-500 group-hover:opacity-0 group-hover:translate-y-8">
                智能游戏平台，带来沉浸式的娱乐体验
              </p>
              
              <!-- 悬浮时显示的按钮 -->
              <div class="absolute bottom-6 left-0 right-0 text-center opacity-0 transform translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500">
                <span class="inline-block px-4 py-2 bg-secondary-500 text-white rounded-full text-sm font-medium">
                  开始游戏
                </span>
              </div>
            </div>
            
            <!-- 悬浮时的粒子效果 -->
            <div class="absolute inset-0 overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-700">
              <div class="particle-1 absolute w-20 h-20 rounded-full bg-secondary-400/10 -top-10 -left-10 group-hover:animate-float-slow"></div>
              <div class="particle-2 absolute w-16 h-16 rounded-full bg-secondary-400/10 bottom-10 right-10 group-hover:animate-float-medium"></div>
              <div class="particle-3 absolute w-12 h-12 rounded-full bg-secondary-400/10 bottom-20 left-20 group-hover:animate-float-fast"></div>
            </div>
          </div>
        </router-link>
        
        <!-- AI客服 -->
        <router-link to="/service" class="group h-full" @click.native="handleProductClick">
          <div class="relative bg-gray-800/50 backdrop-blur-sm rounded-xl overflow-hidden shadow-lg border border-gray-700 transition-all duration-500 hover:shadow-2xl hover:border-tertiary-500 hover:scale-105 h-full flex flex-col">
            <!-- 背景动画效果 -->
            <div class="absolute inset-0 bg-gradient-to-br from-tertiary-900/20 to-tertiary-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
            
            <!-- 图标和内容 -->
            <div class="relative z-10 flex-grow flex flex-col items-center justify-center p-6 text-center">
              <div class="w-16 h-16 rounded-full bg-tertiary-500/20 flex items-center justify-center mb-4 transform transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-tertiary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.5 9.5c.32-1.283 1.323-1.283 1.64 0h1.64c.32-1.283 1.32-1.283 1.64 0" />
                </svg>
              </div>
              <h3 class="text-xl font-bold text-white mb-2 transition-transform duration-500 group-hover:translate-y-2">AI客服</h3>
              <p class="text-gray-300 text-sm transition-all duration-500 group-hover:opacity-0 group-hover:translate-y-8">
                24小时智能客服，快速响应您的各种需求
              </p>
              
              <!-- 悬浮时显示的按钮 -->
              <div class="absolute bottom-6 left-0 right-0 text-center opacity-0 transform translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500">
                <span class="inline-block px-4 py-2 bg-tertiary-500 text-white rounded-full text-sm font-medium">
                  咨询客服
                </span>
              </div>
            </div>
            
            <!-- 悬浮时的粒子效果 -->
            <div class="absolute inset-0 overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-700">
              <div class="particle-1 absolute w-20 h-20 rounded-full bg-tertiary-400/10 -top-10 -left-10 group-hover:animate-float-slow"></div>
              <div class="particle-2 absolute w-16 h-16 rounded-full bg-tertiary-400/10 bottom-10 right-10 group-hover:animate-float-medium"></div>
              <div class="particle-3 absolute w-12 h-12 rounded-full bg-tertiary-400/10 bottom-20 left-20 group-hover:animate-float-fast"></div>
            </div>
          </div>
        </router-link>
        
        <!-- AI文件 -->
        <router-link to="/files" class="group h-full" @click.native="handleProductClick">
          <div class="relative bg-gray-800/50 backdrop-blur-sm rounded-xl overflow-hidden shadow-lg border border-gray-700 transition-all duration-500 hover:shadow-2xl hover:border-quaternary-500 hover:scale-105 h-full flex flex-col">
            <!-- 背景动画效果 -->
            <div class="absolute inset-0 bg-gradient-to-br from-quaternary-900/20 to-quaternary-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
            
            <!-- 图标和内容 -->
            <div class="relative z-10 flex-grow flex flex-col items-center justify-center p-6 text-center">
              <div class="w-16 h-16 rounded-full bg-quaternary-500/20 flex items-center justify-center mb-4 transform transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-quaternary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
              </div>
              <h3 class="text-xl font-bold text-white mb-2 transition-transform duration-500 group-hover:translate-y-2">AI文件</h3>
              <p class="text-gray-300 text-sm transition-all duration-500 group-hover:opacity-0 group-hover:translate-y-8">
                智能文档处理，高效管理和分析各类文件
              </p>
              
              <!-- 悬浮时显示的按钮 -->
              <div class="absolute bottom-6 left-0 right-0 text-center opacity-0 transform translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500">
                <span class="inline-block px-4 py-2 bg-quaternary-500 text-white rounded-full text-sm font-medium">
                  处理文件
                </span>
              </div>
            </div>
            
            <!-- 悬浮时的粒子效果 -->
            <div class="absolute inset-0 overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-700">
              <div class="particle-1 absolute w-20 h-20 rounded-full bg-quaternary-400/10 -top-10 -left-10 group-hover:animate-float-slow"></div>
              <div class="particle-2 absolute w-16 h-16 rounded-full bg-quaternary-400/10 bottom-10 right-10 group-hover:animate-float-medium"></div>
              <div class="particle-3 absolute w-12 h-12 rounded-full bg-quaternary-400/10 bottom-20 left-20 group-hover:animate-float-fast"></div>
            </div>
          </div>
        </router-link>
      </div>
    </main>
    
    <footer class="bg-gray-900 py-8">
      <div class="container mx-auto px-6">
        <div class="text-center text-gray-400 text-sm">
          <p>© {{ new Date().getFullYear() }} 辰晓科技. 保留所有权利.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import { useRouter } from 'vue-router';
// 导入 httputils
import { http } from '@cx/utils';

const router = useRouter();

// 用户菜单相关状态
const showUserMenu = ref(false);
const userMenuRef = ref<HTMLElement | null>(null);
// 从本地存储加载登录状态
const isLoggedIn = ref(localStorage.getItem('isLoggedIn') === 'true');
const userName = ref(localStorage.getItem('userName') || '辰晓用户');
const userRole = ref(localStorage.getItem('userRole') || '普通会员');
const userInitial = computed(() => userName.value.charAt(0));

// 登录模态框状态
const showLoginModal = ref(false);
const loginType = ref<'password' | 'sms'>('password');
const passwordForm = ref({
  username: '',
  password: '',
  captcha: '' // 添加验证码字段
});
const smsForm = ref({
  phone: '',
  code: ''
});
const countdown = ref(0);
// 添加表单验证状态
const formErrors = ref({
  username: '',
  password: '',
  phone: '',
  code: '',
  captcha: '' // 添加验证码错误信息字段
});
// 添加登录状态
const isLoading = ref(false);
const loginError = ref('');
// 添加验证码相关状态
const captchaUrl = ref('');
const captchaId = ref('');

// 添加登录状态监听，保存到本地存储
watch(isLoggedIn, (newValue) => {
  localStorage.setItem('isLoggedIn', newValue.toString());
});

// 用户菜单相关方法
const toggleUserMenu = () => {
  showUserMenu.value = !showUserMenu.value;
};

const openSettings = () => {
  showUserMenu.value = false;
  router.push('/settings');
};

const handleLogout = () => {
  showUserMenu.value = false;
  isLoggedIn.value = false;
};

// 获取图形验证码
const refreshCaptcha = async () => {
  try {
    const timestamp = new Date().getTime(); // 添加时间戳防止缓存
    const response = await http.get('/api/auth/captcha', { timestamp });
    captchaUrl.value = response.data.captchaUrl;
    captchaId.value = response.data.captchaId;
  } catch (error: any) {
    console.error('获取验证码失败:', error);
  }
};


// 点击外部关闭菜单
onMounted(() => {
  document.addEventListener('click', (e) => {
    const target = e.target as HTMLElement;
    if (!userMenuRef.value?.contains(target)) {
      showUserMenu.value = false;
    }
  });
});

onUnmounted(() => {
  document.removeEventListener('click', () => {});
});

// 添加表单验证方法
const validatePasswordForm = (): boolean => {
  let isValid = true;
  formErrors.value.username = '';
  formErrors.value.password = '';
  formErrors.value.captcha = '';
  
  if (!passwordForm.value.username) {
    formErrors.value.username = '请输入用户名或手机号';
    isValid = false;
  }
  
  if (!passwordForm.value.password) {
    formErrors.value.password = '请输入密码';
    isValid = false;
  } else if (passwordForm.value.password.length < 6) {
    formErrors.value.password = '密码长度不能少于6位';
    isValid = false;
  }
  if (!passwordForm.value.captcha) {
    formErrors.value.captcha = '请输入验证码';
    isValid = false;
  }
  return isValid;
};

const validateSmsForm = (): boolean => {
  let isValid = true;
  formErrors.value.phone = '';
  formErrors.value.code = '';
  
  if (!smsForm.value.phone) {
    formErrors.value.phone = '请输入手机号';
    isValid = false;
  } else if (!/^1[3-9]\d{9}$/.test(smsForm.value.phone)) {
    formErrors.value.phone = '请输入有效的手机号';
    isValid = false;
  }
  
  if (!smsForm.value.code) {
    formErrors.value.code = '请输入验证码';
    isValid = false;
  } else if (!/^\d{6}$/.test(smsForm.value.code)) {
    formErrors.value.code = '验证码格式不正确';
    isValid = false;
  }
  
  return isValid;
};

// 修改登录方法，添加表单验证
const handlePasswordLogin = async () => {
  if (!validatePasswordForm()) return;
  
  try {
    isLoading.value = true;
    loginError.value = '';
    
    // 使用 http.post 发起登录请求
    const response = await http.post('/api/auth/login', {
      username: passwordForm.value.username,
      password: passwordForm.value.password,
      captchaId: captchaId.value,
      captchaCode: passwordForm.value.captcha,
      loginType: 'password'
    });
    
    // 处理登录响应
    // 由于响应拦截器已经处理了错误情况，这里只需处理成功情况
    const { token, userInfo } = response.data;
    
    // 保存token到localStorage或cookie
    localStorage.setItem('token', token);
    
    // 更新用户信息
    isLoggedIn.value = true;
    userName.value = userInfo.username || passwordForm.value.username;
    userRole.value = userInfo.role || '普通会员';
    
    // 保存到本地存储
    localStorage.setItem('userName', userName.value);
    localStorage.setItem('userRole', userRole.value);
    
    // 关闭登录框
    closeLoginModal();
  } catch (error: any) {
    console.error('登录失败:', error);
    loginError.value = error.message || '登录请求失败，请稍后再试';
    // 登录失败时刷新验证码
    refreshCaptcha();
  } finally {
    isLoading.value = false;
  }
};

const handleSmsLogin = async () => {
  if (!validateSmsForm()) return;
  
  try {
    isLoading.value = true;
    loginError.value = '';
    
    // 使用 http.post 发起短信登录请求
    const response = await http.post('/api/auth/login', {
      phone: smsForm.value.phone,
      code: smsForm.value.code,
      loginType: 'sms'
    });
    
    // 处理登录响应
    const { token, userInfo } = response.data;
    
    // 保存token到localStorage或cookie
    localStorage.setItem('token', token);
    
    // 更新用户信息
    isLoggedIn.value = true;
    userName.value = userInfo.username || `用户${smsForm.value.phone.substring(7)}`;
    userRole.value = userInfo.role || '普通会员';
    
    // 保存到本地存储
    localStorage.setItem('userName', userName.value);
    localStorage.setItem('userRole', userRole.value);
    
    // 关闭登录框
    closeLoginModal();
  } catch (error: any) {
    console.error('登录失败:', error);
    loginError.value = error.message || '登录请求失败，请稍后再试';
  } finally {
    isLoading.value = false;
  }
};

// 在打开登录框时获取验证码
const goToLogin = () => {
  showUserMenu.value = false;
  showLoginModal.value = true;
  // 重置错误信息
  loginError.value = '';
  formErrors.value = { username: '', password: '', phone: '', code: '', captcha: '' };
  // 获取验证码
  refreshCaptcha();
};

// 关闭登录框时重置表单
const closeLoginModal = () => {
  showLoginModal.value = false;
  loginType.value = 'password';
  passwordForm.value = { username: '', password: '', captcha: '' };
  smsForm.value = { phone: '', code: '' };
  captchaUrl.value = '';
  captchaId.value = '';
};

// 修改发送验证码方法
const sendSmsCode = async () => {
  if (!smsForm.value.phone || !/^1[3-9]\d{9}$/.test(smsForm.value.phone)) {
    formErrors.value.phone = '请输入有效的手机号';
    return;
  }
  
  try {
    isLoading.value = true;
    
    // 使用 http.post 发起获取验证码请求
    await http.post('/api/auth/send-sms-code', {
      phone: smsForm.value.phone
    });
    
    // 开始倒计时
    countdown.value = 60;
    const timer = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(timer);
      }
    }, 1000);
  } catch (error: any) {
    console.error('发送验证码失败:', error);
    // 发送失败时重置倒计时
    countdown.value = 0;
    formErrors.value.phone = error.message || '发送验证码失败，请稍后重试';
  } finally {
    isLoading.value = false;
  }
};

// 添加产品卡片点击处理
// 添加横幅动画状态
const showBannerAnimation = ref(false);
const showLoginAnimation = ref(false);

// 修改产品卡片点击处理方法
const handleProductClick = (path: string) => {
  if (!isLoggedIn.value) {
    // 触发登录按钮动画
    showLoginAnimation.value = true;
    setTimeout(() => {
      showLoginAnimation.value = false;
    }, 500);
    
    // 触发横幅动画
    showBannerAnimation.value = true;
    setTimeout(() => {
      showBannerAnimation.value = false;
    }, 1000);
    
    // 显示登录提示
    goToLogin();
  } else {
    // 已登录，跳转到对应页面
    router.push(path);
  }
};
</script>
<style>
/* 添加自定义动画 */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes float-medium {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-15px) rotate(-5deg); }
}

@keyframes float-fast {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-10px) rotate(10deg); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* 添加横幅注意力动画 */
@keyframes banner-attention {
  0%, 100% { transform: translateY(0); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
  25% { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); }
  75% { transform: translateY(2px); box-shadow: 0 8px 10px -2px rgba(0, 0, 0, 0.15); }
}

.animate-banner-attention {
  animation: banner-attention 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.animate-shake {
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.login-button-highlight {
  background-color: rgba(255, 255, 255, 0.4);
}

.animate-float-slow {
  animation: float-slow 8s ease-in-out infinite;
}

.animate-float-medium {
  animation: float-medium 6s ease-in-out infinite;
}

.animate-float-fast {
  animation: float-fast 4s ease-in-out infinite;
}

/* 自定义颜色变量 */
:root {
  --color-primary-400: #6366f1;
  --color-primary-500: #4f46e5;
  --color-primary-900: #312e81;
  
  --color-secondary-400: #f472b6;
  --color-secondary-500: #ec4899;
  --color-secondary-900: #831843;
  
  --color-tertiary-400: #34d399;
  --color-tertiary-500: #10b981;
  --color-tertiary-900: #064e3b;
  
  --color-quaternary-400: #fb923c;
  --color-quaternary-500: #f97316;
  --color-quaternary-900: #7c2d12;
}
</style>
